<template>
  <div id="title" class="component-wrap">
    <div class="title">
      <div class="title-content">
        <img src="../../assets/ic_titlebar_back@3x.png" class="title-back" @click="goBack" v-if="titleMsg.back"/>
        <h2>{{titleMsg.title}}</h2>
        <img src="../../assets/ic_titlebar_scan@3x.png" class="title-scan" v-if="titleMsg.scan"/>
        <img src="../../assets/ic_titlebar_search@3x.png" class="title-search" v-if="titleMsg.search && titleMsg.scan"/>
        <img src="../../assets/ic_titlebar_search@3x.png" class="title-search-solo" v-if="titleMsg.search && !titleMsg.scan"/>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: "Title",
    props: ["titleMsg"],
    methods: {
      goBack:function(){
        this.$router.go(-1);
      }
    }
  }
</script>

<style scoped>
  #title .title {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 2;
  }
  #title .title-content {
    position: relative;
    width: 100%;
    height: 4.4rem;
    background: #00CCCC;
    background-image: linear-gradient(-136deg, #2BB1FF 0%, #00CCCC 100%);
  }
  #title .title-content h2 {
    width: 100%;
    height: 4.4rem;
    text-align: center;
    line-height: 4.4rem;
    font-size: 1.8rem;
    color: #fff;
    font-weight: normal;
  }
  #title .title-content .title-back {
    position: absolute;
    top: 50%;
    left: 1rem;
    width: 2rem;
    height: 2rem;
    margin-top: -1rem;
  }
  #title .title-content .title-scan {
    position: absolute;
    top: 50%;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    margin-top: -1rem;
  }
  #title .title-content .title-search {
    position: absolute;
    top: 50%;
    right: 4rem;
    width: 2rem;
    height: 2rem;
    margin-top: -1rem;
  }
  #title .title-content .title-search-solo {
    position: absolute;
    top: 50%;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    margin-top: -1rem;
  }
</style>
